﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        * {
            font-family: 'Trebuchet MS' , 'Liberation Sans' , 'DejaVu Sans' ,sans-serif;
        }
        .dataTables_wrapper {
            position: relative;
            min-height: 302px;
            clear: both;
            _height: 302px;
            zoom: 1; /* Feeling sorry for IE */
        }
        .dataTables_length {
            width: 40%;
            float: left;
        }
        .dataTables_filter {
            width: 50%;
            float: right;
            text-align: right;
        }
        table.display {
            margin: 0 auto;
            width: 100%;
            clear: both;
        }
        table.display thead th {
            padding: 3px 18px 3px 10px;
            border-bottom: 1px solid black;
            font-weight: bold;
            cursor: pointer; *cursor:hand;}
        table.display tfoot th {
            padding: 3px 10px;
            border-top: 1px solid black;
            font-weight: bold;
        }
        table.display tr.heading2 td {
            border-bottom: 1px solid #aaa;
        }
        table.display td {
            padding: 3px 10px;
        }
        table.display td.center {
            text-align: center;
        }
        tr.odd {
            background-color: #E2E4FF;
        }
        tr.even {
            background-color: white;
        }
        .clear {
            clear: both;
        }
        .dataTables_empty {
            text-align: center;
        }
        table.display tr.even.row_selected td {
            background-color: #B0BED9;
        }
        table.display tr.odd.row_selected td {
            background-color: #9FAFD1;
        }
        table.display td {
            font-family: Consolas, "Andale Mono WT" , "Andale Mono" , "Lucida Console" , "Lucida Sans Typewriter" , "DejaVu Sans Mono" , "Bitstream Vera Sans Mono" , "Liberation Mono" , "Nimbus Mono L" , Monaco, "Courier New" , Courier, monospace;
            font-size: 11px;
        }
    </style>

    <script src="3rd-party/jquery-1.4.1.js" type="text/javascript"></script>

    <script src="3rd-party/jquery.dataTables.js" type="text/javascript"></script>


    <script type="text/javascript">

        // 
        // Soapi-Param-Exam
        // http://soapi.info/
        // 
        // Copyright 2010, Sky Sanders
        // Dual licensed under the MIT or GPL Version 2 licenses.
        // http://soapi.info/code/js/license.aspx
        // 
        // Date: Thu July 01 2010
        //     

        $(document).ready(function() {
            $.getJSON("http://soapi.info/rest/api?format=json&jsonp=?", function(data) {
                var aDataSet = [];
                $(data.Routes).each(function(idx, route) {
                    $(route.Parameters).each(function(idx, param) {
                        aDataSet.push([route.Path, route.RouteName, param.Name, param.NameFixed, param.TypeDescription,
                        param.Optional.toString(), param.Summary]);
                    });
                });
                $('#grid').html('<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"></table>');
                $('#example').dataTable({
                    "bPaginate": false,
                    "aaData": aDataSet,
                    "aoColumns": [
						{ "sTitle": "Route" },
						{ "sTitle": "RouteName" },
						{ "sTitle": "Name" },
						{ "sTitle": "NameFixed" },
						{ "sTitle": "TypeDescription" },
						{ "sTitle": "Optional" },
						{ "sTitle": "Summary" }
					]
                });
            }, function(data) { alert(data.message); });
        });
    </script>

</head>
<body>
    <h3>
        SOAPI-PARAM-EXAM</h3>
    <p>
        A sortable, filterable list of all parameters in the Stack Overflow api</p>
    <div id="container">
        <div id="grid">
        </div>
    </div>
</body>
</html>
